<template>
	<view>
		<view class="content">
				<swiper class="myswipe" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="banneritem in  bannerList" :key="banneritem.id">
						<image :src="banneritem.picUrl"></image>
					</swiper-item>
				</swiper>
		</view>
		<view class="cate_list">
			<view class="cate_one" v-for="item in cateList" :key="item.id">
				<image :src="item.icon"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {getBannerApi,getCate} from '../../api/home.js'
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList:[],
				cateList:[]
			}
		},
		onLoad() {

		},
		onShow(){
			this.getBanner();
			this.getCategory();
		},
		onReady(){},
		methods: {
			async getBanner(){
				var res=await getBannerApi()
				console.log(res)
				this.bannerList=res.data.slice(3,6)
				console.log(this.bannerList)
			},
			async getCategory(){
				var res=await getCate()
				this.cateList=res.data;
				console.log(res)
			}
		}
	}
</script>

<style lang="scss">
.myswipe{
	width: 100%;
	height: 300rpx;
		image{
			width: 100%;
			height: 300rpx;
		}
}
.cate_list{
	width: 100%;
	height: 300rpx;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background: skyblue;
	.cate_one{
		width: 20%;
		height: 140rpx;
		text-align: center;
		image{
			width: 80%;
			height: 90rpx;
		}
	}
}
</style>
